import React from "react";
import { Tabs, Table, Modal, Badge,Icon } from "antd";
import moment from "moment";
import { filterState } from "utils/filter";
import { formatDate } from "utils";
import style from './index.less'
import PropTypes from "prop-types";

const TabPane = Tabs.TabPane;
const confirm = Modal.confirm;

const goDetails = ({
  successTotal,
  list,
  ...tabProps
}) => {
  const goReason = (record) => {
    Modal.confirm({
      title: "提示",
      content: record.borrowReason,
      okText: "确认",
      cancelText: "取消",
    });
  }

    // const { list, pagination, successTotal,loading } = this.props;
    if(!successTotal){
      return null
    }
    const columns = [
      {
        title: "借阅人",
        key: "borrowUserName",
        dataIndex: "borrowUserName"
      },
      {
        title: "借阅方式",
        key: "dataType",
        dataIndex: "dataType",
        render: (text, record) => {
          return <div>{text == "0" ? "电子资料" : "纸质资料"}</div>;
        }
      },
      {
        title: "申请提交日期",
        key: "borrowApplyAt",
        dataIndex: "borrowApplyAt",
        render: (text, record) => formatDate(text)
      },
      {
        title: "借阅时间",
        key: "borrowStartAt",
        dataIndex: "borrowStartAt",
        render: (text, record) => {
          return (
            <div>
              {formatDate(record.borrowStartAt)} -{" "}
              {formatDate(record.borrowEndAt)}
            </div>
          );
        }
      },
      {
        title: "是否续借",
        key: "renewTime",
        dataIndex: "renewTime",
        render: (text, record) => {
          return(
            <div>
              {record.renewTime ? "是" : "否"}
            </div>
          )
          
        }
      },
      {
        title: "借阅审批人",
        key: "borrowAuditorName",
        dataIndex: "borrowAuditorName",
      },
      {
        title: "审批结果",
        key: "borrowResult",
        dataIndex: "borrowResult",
        render: (text, record) => {
          return (
            <div>{text == 0 ? "借阅申请中" : text == 1 ? "通过" : text == 2 ? "拒绝" : text == 3 ? "已过期" : "已归还" }</div>
          );
        }
      },
      {
        title: "是否归还",
        key: "borrowState",
        dataIndex: "borrowState",
        render: (text, record) => {
          return (
            <div>
              {text == "4" ? "已归还" : "借阅中"}
            </div>
          );
        }
      },
      {
        title: "借阅理由",
        key: "operation",
        render: (record, text) => {
          return (
            <div>
              <a onClick={() => goReason(record)}>查看</a>
            </div>
          );
        }
      }
    ];
    return (
      <div>
        <h3 className={style.titles} style={{ background: "#ECF6FD", border: "1px solid #108ee9" }}>
          <Icon type="exclamation-circle" style={{ color: "#108ee9", marginRight: 5 }} />
          该档案被申请借阅<span style={{ color: "#008cec" }}>{list.length}</span>次
          被借阅成功<span style={{ color: "#008cec" }}>{successTotal}</span>次
        </h3>
        <Table columns={columns} dataSource={list} {...tabProps}/>
      </div>
    );
  }

  goDetails.propTypes = {
    location: PropTypes.object,
    dispatch: PropTypes.func
  };
  

export default goDetails;
